<template>
  <div class="dashboard">
    <el-checkbox-group v-model="checkList" @change="change">
      <div class="vertical-checkbox" v-for="e in list" :key="e.id">
        <el-checkbox :label="e.name"></el-checkbox>
      </div>

      <div
        style="margin-bottom: 10px"
        class="vertical-checkbox"
        v-for="(e, i) in arr"
        :key="e + i"
      >
        <el-checkbox :label="e">
          <el-input v-model="arr[i].name" placeholder="请输入内容"></el-input>
          <i class="el-icon-delete" @click="del(i)"></i>
        </el-checkbox>
      </div>
    </el-checkbox-group>
    <el-button type="text" icon="el-icon-plus" @click="add">添加</el-button>
    <el-button type="" @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      list: [
        { id: 1, stats: 1, name: "选项1" },
        { id: 2, stats: 1, name: "选项2" },
        { id: 3, stats: 1, name: "选项3" },
        { id: 4, stats: 0, name: "选项4" },
      ],
      checkList: [],
      arr: [],
      list2: [],
    };
  },
  created() {
    this.checkList = this.list.filter((e) => e.stats === 1).map((e) => e.name);
  },
  methods: {
    add() {
      // const id = Date.now();
      this.arr.push({ id: "", stats: 1, name: "" });
    },
    del(index) {
      this.arr = this.arr.filter((e, i) => i !== index);
    },
    change(val) {
      // console.log(val);
      // console.log(this.arr);
      // console.log(this.list2);
    },
    save() {
      for (let i = 0; i < this.list.length; i++) {
        if (this.checkList.includes(this.list[i].name)) {
          this.list[i].stats = 1;
        } else {
          this.list[i].stats = 0;
        }
      }
      for (let i = 0; i < this.arr.length; i++) {
        if (this.checkList.includes(this.arr[i])) {
          // this.list2.push(this.arr[i]);
          this.arr[i].stats = 1;
        } else {
          this.arr[i].stats = 0;
        }
      }
      let arr2 = this.arr.filter((e) => e.name !== "");
      console.log(this.list);
      console.log(this.arr);
      this.list2 = [...this.list, ...arr2];
      console.log(this.list2);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  padding-top: 50px;
  padding-left: 50px;
}
</style>
